<template>
    <view class="app">
        <view class="custom_header" style="height: {{navH}}px">
            <view class="search">
                <view>
                    <view id="icon">
                        <u-icon name="arrow-left" color="#2979ff" size="18" @click="icon"></u-icon>
                    </view>
                </view>
                <view>菜单设置</view>
                <view></view>
            </view>
        </view>
        <view class="content">
            <view class="one">
                设置CRM页面显示的功能菜单及排序，至少需显示三项
            </view>
            <view class="two" v-for="(item, index) in sheList" :key="index">
                <view>
                    <img :src="item.img" alt="" style="width: 20px;height: 20px; vertical-align: middle;">
                    <span style="font-size: 13px; margin-left: 10px;">{{ item.name }}</span>
                </view>
                <view></view>
                <view>
                    <view class="Template_detail_shopbtn_text_btn2" @click="checkChange(index)">
                        <view class="Template_detail_shopbtn_text_btn2_view" :class="item.checked ? 'upactive' : ''">
                            <view class="Template_detail_shopbtn_text_btn2_view2" :class="item.checked ? 'activecss' : ''">
                            </view>
                        </view>
                    </view>
                </view>
                <view>
                    <img :src="item.images" alt=""
                        style=" margin-right: 30px; width: 30px;height: 30px; vertical-align: middle;">
                </view>
            </view>



        </view>
    </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
const icon = () => {
    uni.navigateBack({
        delta: 1
    })
}
const checked = ref(false);
const checkChange = (index: number) => {
    sheList.value.forEach((item) => {
        if (item.id == index) {
            item.checked = !item.checked;

        }
    })
}
const sheList = ref([
    { id: 0, name: "客户管理", checked: false, img: "/static/img/25.png", price: "", images: "/static/img/37.png" },
    { id: 1, name: "销售线索", checked: false, img: "/static/img/26.png", price: "", images: "/static/img/37.png" },
    { id: 2, name: "联系人", checked: false, img: "/static/img/27.png", price: "", images: "/static/img/37.png" },
    { id: 3, name: "跟进记录", checked: false, img: "/static/img/28.png", price: "", images: "/static/img/37.png" },
    { id: 4, name: "商机管理", checked: false, img: "/static/img/29.png", price: "", images: "/static/img/37.png" },
    { id: 5, name: "订单管理", checked: false, img: "/static/img/30.png", price: "", images: "/static/img/37.png" },
    { id: 6, name: "账务管理", checked: false, img: "/static/img/31.png", price: "", images: "/static/img/37.png" },
    { id: 7, name: "统计报表", checked: false, img: "/static/img/32.png", price: "", images: "/static/img/37.png" },
    { id: 8, name: "产品列表", checked: false, img: "/static/img/33.png", price: "", images: "/static/img/37.png" },
    { id: 9, name: "营销活动", checked: false, img: "/static/img/34.png", price: "", images: "/static/img/37.png" },
    { id: 10, name: "竞争对手", checked: false, img: "/static/img/35.png", price: "", images: "/static/img/37.png" },
    { id: 11, name: "业绩目标", checked: false, img: "/static/img/36.png", price: "", images: "/static/img/37.png" },
])


</script>

<style lang="scss">
.Template_detail_shopbtn_text_btn2 {
    width: 20%;

}

.Template_detail_shopbtn_text_btn2_view {
    width: 35px;
    height: 18px;
    background: blue;
    border-radius: 18px;
    margin-left: 140px;
    margin-top: 5px;
}

.Template_detail_shopbtn_text_btn2_view2 {
    width: 15px;
    height: 15px;
    background: #fff;
    border-radius: 15px;
    float: right;
    margin-top: 1px;
}

.upactive {
    background: #ccc !important;
}

.activecss {
    background: #fff !important;
    float: left !important;

}








.one {
    margin-top: 110px;
    margin-left: 8px;
    border: 1px solid #ccc;
    width: 360px;
    font-size: 12px;
    color: #666;
    padding: 20px 10px;
}

.two {
    width: 360px;
    color: #666;
    padding: 20px 10px;
    margin-left: 8px;
    border: 1px solid #ccc;
    display: flex;
    justify-content: space-between;
}

.custom_header {
    display: flex;
    justify-content: space-between;
    width: 360px;
    line-height: 80px;
    font-weight: bold;
    position: fixed;
    left: 0;
    top: 10px;
    z-index: 99;
    margin-left: 8px;
    border: 1px solid #ccc;
    height: 90px;
    background-color: #fff;
}

.search {
    display: flex;
    width: 375px;
    justify-content: space-between;
    align-items: center;
    padding: 10px 10px;
    position: relative;
}

#icon {
    position: absolute;
    top: 40px;
    left: 10px;
    z-index: 66;
}

.app {
    width: 100vw;
    height: 100vh;
}

.content {
    height: calc(100vh - 90px);
    overflow: hidden;
    overflow-y: scroll;

}
</style>